import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  Input,
  OnInit,
  Output,
  ViewEncapsulation,
} from '@angular/core';

import { ApesCalendarI18nInterface } from '@shared/apes/i18n';
import { CandyDate } from '../candy-date/candy-date';

@Component({
  selector: 'month-panel',
  exportAs: 'monthPanel',
  templateUrl: 'month-panel.component.html',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})

export class MonthPanelComponent{
  @Input() locale: ApesCalendarI18nInterface;
  @Input() value: CandyDate;
  @Input() disabledDate: (date: Date) => boolean;

  @Output() readonly valueChange = new EventEmitter<CandyDate>();
  @Output() readonly yearPanelShow = new EventEmitter<void>();

  prefixCls: string = 'apes-calendar-month-panel';

  previousYear(): void {
    this.gotoYear(-1);
  }

  nextYear(): void {
    this.gotoYear(1);
  }

  // Re-render panel content by the header's buttons (NOTE: Do not try to trigger final value change)
  private gotoYear(amount: number): void {
    this.value = this.value.addYears(amount);
    // this.valueChange.emit(this.value); // Do not try to trigger final value change
  }
}
